<script lang="ts" setup>
    import BottomPage from './BottomPage.vue'
    import PageContainer from './PageContainer.vue'
    const emit = defineEmits(['pageQuery', 'query', 'update:pageData'])
   const props = defineProps({
     loading: {
       type: Boolean,
       default: false
     },
     pageData: {
       type: Object,
       default: function () {
         return {}
       }
     },
     showPage: {
       type: Boolean,
       default: true
     },
     back: {
       type: Boolean,
       default: false
     },
     noLoading: {
       type: Boolean,
       default: false
     },
     showSearch: {
       type: Boolean,
       default: true
     },
     searchMini: {
       type: Boolean,
       default: false
     }
   })
   const pageChangeHandler = () => {
     emit('pageQuery')
   }
    const queryHandler = () => {
        emit('query')
    }
</script>

<template>
  <page-container class="page-container-inner"
                  :loading="!noLoading&&((pageData && pageData.isLoading)||loading)">
    <div v-if="showSearch" :class="['ctr-box',searchMini?'ctr-box-mini':'']">
      <div class="left-control">
        <slot name="search" />
      </div>
      <div class="space-mid" />
      <div class="right-control">
        <slot name="control" />
      </div>
    </div>
    <div class="data-list">
      <div class="list-box">
        <div v-if="back" class="list-back" />
        <slot />
      </div>
      <div v-if="showPage && pageData" class="bottom-box">
        <slot name="page">
          <bottom-page :page-data="pageData"
                       @query="queryHandler"
                       @page-query="pageChangeHandler" />
        </slot>
      </div>
    </div>
  </page-container>
</template>

<style scoped lang="scss">

  .page-container-inner{
    @include ver-group();

    .ctr-box-mini{
      height:25px!important;
    }
    .ctr-box{
      @include hor-group();
      flex:none;
      width:100%;
      height:var(--w-title-height);

      .left-control{
        @include hor-group();
        flex:none;
      }
      .left-control-title{
        @include tile-group();
      }
      .space-mid{
        flex:auto;
        width:100%;
      }

      .right-control{
        @include hor-group(end);
        flex:none;
      }
    }

  }

  .data-list{
    @include ver-group() ;
    flex:auto;
    width:100%;
    height:100%;
    overflow: hidden;
    position:relative;
    .list-box{
      flex:auto;
      width:100%;
      height:100%;
      overflow: hidden;
      position:relative;
      .list-back{
        @include abs-group();
        background:var(--w-bg-box);
        border:1px solid var(--w-color-bor);
        box-sizing: border-box;
      }
    }
    .bottom-box{
      @include hor-group(center) ;
      flex:none;
      width:100%;
      margin-top: 10px;
    }
  }

  .col-btn-box{
    @include hor-group(center) ;
    flex:none;
    width:100%;
    .icon-btn-tb {
      font-size:18px;
      color:var(--w-color-nor2);
      padding: 0 10px;
      box-sizing: border-box;
      &:hover{
        color:var(--w-color-light);
      }
    }

  }

</style>
